<template>
 <div class="articlelist pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">文章名称</span>
          <el-input
            class="articlelist_lable_input"
            type="text"
            placeholder="请输入"
            v-model.trim="queryVal.title">
          </el-input>
        </div>
      </el-col>
      <el-col :span="8" class="fsc">
        <span class="articlelist_lable">发布时间</span>
        <div class="fsc">
          <div>
            <el-date-picker
              class="articlelist_lable_time"
              v-model="queryVal.start"
              v-on:change = 'upDateTime'
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <span>-</span>
          <div>
            <el-date-picker
              class="articlelist_lable_time"
              v-on:change = 'upDateTime'
              v-model="queryVal.end"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        
      </el-col>
      <el-col :span="8">
        <div class="fsc">
          <span class="articlelist_lable">审核状态</span>
          <el-select v-model="queryVal.status" placeholder="选择状态">
          <el-option
            v-for="item in grades"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">作者</span>
          <el-input
            type="text"
            class="articlelist_lable_input"
            placeholder="请输入"
            v-model.trim="queryVal.userName">
          </el-input>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="8">
        <div class="fsc">
          <span class="articlelist_lable">分属版块</span>
          <el-select v-model="queryVal.categoriesId">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-show="item.id !== 7"
              v-for="item in plate"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="8">
        <div class="fsc">
          <span class="articlelist_lable">有无推荐</span>
          <el-select v-model="queryVal.grade_status">
            <el-option value="3" label="全部"></el-option>          
            <el-option value="1" label="有"></el-option>
            <el-option value="0" label="无"></el-option>
          </el-select>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fbc">
      <router-link to="/article/release"><el-button type="primary">发布文章+</el-button></router-link>
      <span>
        <el-button @click="reset">重置</el-button>
        <el-button @click="getList('query')" type="primary">查询</el-button>
      </span>
    </p>
   </div>
   <div>
     <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="images.length"
        label="封面图片"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contentSize"
        label="内容图片"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        label="图片布局"
        align="center"
        width="180">
        <template slot-scope="scope">
          <span>
            {{isImg(scope)}}
          </span>
        </template>
        
      </el-table-column>
      <el-table-column
        prop="categories.name"
        align="center"
        label="分属版块">
        <template slot-scope="scope">
          <span>{{scope.row.categories.length==0?'--':scope.row.categories.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="有无推荐">
        <template slot-scope="scope">
          <span>{{scope.row.grade_status==2?'有':'无'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="updatetime"
        label="更新时间">
      </el-table-column>
      <el-table-column
        align="center"
        label="审核状态">
        <template slot-scope="scope">
          <span :class="scope.row.status==2?'c_red':''">{{isStatus(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="getDetail(scope)" type="primary" size="small">预览</el-button>
          <el-button v-if="scope.row.status==5||scope.row.status==2" @click="administration(scope)" type="success" size="small">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="article_pagin block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="文章管理"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="fsc">
          <p>文章标题:</p>
          <p class="mg_l15">{{dialog.title}}</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="fsc">
          <p>配图数:</p>
          <p class="mg_l15">{{centerDialogVisible?dialog.images+dialog.scope.row.contentSize:''}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>发布时间:</p>
          <p class="mg_l15">{{dialog.updatetime}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>作者:</p>
          <p class="mg_l15">{{dialog.userName}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>当前审核状态:</p>
          <p class="mg_l15">{{dialog.status}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>审核人:</p>
          <p class="mg_l15">无为</p>
        </div>
      </el-col>
      <el-col class="mg_t40" :span="24">
        <div class="fbc fwrap">
          <el-button @click="index=1" :type="index==1?'primary':''">预览</el-button>
          <el-button @click="index=2" :type="index==2?'primary':''">提交审核</el-button>
          <el-button @click="index=3" :type="index==3?'primary':''">修改</el-button>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible=false">取消</el-button>      
      <el-button type="primary" @click="determine">确定</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
import { mapGetters } from 'vuex';
import axios from 'axios';
import utils from '@/common/utils'; 
import Md5 from 'js-md5'
export default {
  computed: {
    ...mapGetters(['isSun'])
  },
  data() {
    return {
      page: {
        currentPage: 1,    //默认页数
        total: null        //总页数
      }, 
      tableData: [],  //表格数据
      dialog: {},   //弹窗数据 
      plate: [],     //分属板块下拉数据
      index: 1,      //dialog里button 选择
      grades: [       //状态下拉数据
        { value: '', label: '全部'} ,        
        { value: '5', label: '草稿'} ,
        { value: '1', label: '已审核'},
        { value: '2',label: '驳回修改'},
        { value: '3',label: '已下架'},
        { value: '4',label: '待审核中'},
      ],
      queryVal: {    //表格请求参数
        title: '',
        start: '',
        end: '',
        status: '',
        userName: '',
        categoriesId: '',
        grade_status: '3',
        page: '',
        type: 1
      }, 
      
      centerDialogVisible: false,    //弹窗
     
      isStatus: this.$utils.isStatus, // 判断审核状态
    }
  },
  created() { 
    this.getList();
    this.getPlate();
  },
   beforeRouteEnter (to, from, next) {
     next(res=> {
       console.log(to,from)
       console.log(from.path)
       if(from.path == '/login') {
         res.$router.go(0)
       }
     })
  },
  methods: {
    reset() {
      this.queryVal.title='';
      this.queryVal.userName='';
      this.queryVal.start='';
      this.queryVal.end='';
      this.queryVal.categoriesId='';
      this.queryVal.grade_status='',
      this.queryVal.status='';
      this.getList('query');
    },
    isImg(scope) {       //图片布局
      let status = scope.row.is_img;
      if(status == 1) {
        return '一张图片'
      }else if(status == 2) {
        return '三张靠左'
      }else if(status == 3) {
        return '三张靠右'
      }
    },
    upDateTime() {          //判断时间填写
      if(this.queryVal.end) {
        if(this.queryVal.start - this.queryVal.end > 0) {
          this.$message.error('时间错误')
        }
      }
      
    },
    determine() {
      if(this.index==2) {
        let { id, statusNum } = this.dialog;
        let url = '/admin/article/reviewed';
        let data = { id, status: 4, };
        if(this.index=='2') {
          this.$request.post(url,data).then(res=> {
            if(res.data.code=="0000") {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.getList()              
              this.centerDialogVisible = false
            }else {
              this.$message.error('审核失败')
            }
          }).catch(err=> {
            this.$message.error('服务器错误')
          })
        }
      }else if(this.index==3){
        console.log(this.dialog)
        this.$router.push({
          path: '/article/release',
          query: {
            id: this.dialog.id
          }
        })
      }
    },
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {
      console.log(val)
      this.queryVal.page = val;
      // this.queryVal.currentPage = val
      this.getList('fenye');
    },

   
    getList(label) {  // 获取列表
      if(label == 'query') {
        this.queryVal.page = 1;
        this.page.currentPage = 1;
      }
     console.log(this.queryVal.start,this.queryVal.end)
      this.queryVal.start = !this.queryVal.start==''?Number(this.queryVal.start):'';
      this.queryVal.end = !this.queryVal.end==''?Number(this.queryVal.end):'';
      
      let url1 = '/admin/article/query';
      let data1 = this.queryVal;

      this.$request.post(url1,data1).then((res)=> {
        console.log(res)
        if(res.code="0000") {
          this.tableData = res.data.data.list;
          this.page.total = res.data.data.page.total;
        }else {
          console.log(res)
        }
      }).catch(err=> {
        console.log(err)
      })
    },
    getPlate() {   //分属板块下拉
      let url2 = '/admin/article/getCategories';
      let data2 = {};
      this.$request.get(url2,data2).then(res=> {
        console.log(res);
        this.plate = res.data.data
      }).catch(err=> {
        console.log(err)
      })
    },
    getDetail(scope) {          //预览看详情
      console.log(scope)
      let { id } = scope.row
      let url = '/admin/article/details';
      let data = { id,};
      this.$request.get(url,data).then(res=> {
        console.log(res)
      }).catch(err=> {
        console.log(err)
      })
    },
    administration(scope) {  // 点击管理
      let row = scope.row;
      this.dialog.scope = scope;
      this.dialog.title = row.title;
      this.dialog.id = row.id;
      this.dialog.images = row.images.length;
      this.dialog.updatetime = row.updatetime;
      this.dialog.userName = row.userName;
      this.dialog.statusNum = [row.status];
      this.dialog.status = this.$utils.isStatus(row.status);
      this.centerDialogVisible = true;
     console.log(this.dialog.scope.row.contentSize)
    },
    
  },
  
}
</script>
<style scoped lang="less">
  .articlelist_lable_time {
    width: 200px;
  }
  .articlelist_lable_input {
    width: 350px;
  }
  .articlelist_lable {
    min-width: 80px;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
  .article_pagin {
    margin-bottom: 100px;
  }
</style>

